<template>
  <view class="signing">
    <view class="signing-step">
      <view class="signing-step-content">
        <view class="signing-step-list step-style">
          <text>1</text>
          <view class="signing-title">
            <text>个人信息</text>
          </view>
        </view>
        <view class="line"></view>
        <view class="signing-step-list">
          <text>2</text>
          <view class="signing-title">
            <text>结算信息</text>
          </view>
        </view>
      </view>
    </view>
  </view>

  <view class="write-info" v-show="!backShow">
    <view class="write-info-content">
      <view class="info-content">
        <view class="info-list">
          <text>姓名</text>
          <input type="text" v-model="userName" placeholder="请输入您的姓名" />
        </view>
        <view class="info-list">
          <text>手机号</text>
          <input
            type="number"
            maxlength="11"
            v-model="userPhoneCall"
            placeholder="请输入您的手机号"
          />
        </view>
        <view class="info-list">
          <text>身份证号</text>
          <input
            type="text"
            maxlength="18"
            v-model="userIdCardNumber"
            placeholder="请输入您的身份证号"
          />
        </view>
        <view class="info-list">
          <text>身份证开始时间</text>
          <view class="info-cad-num" @click="openStartTimeSelectChange">
            <text>{{ startTimeValue || "请选择您的身份证开始时间" }}</text>
            <image src="@/static/mine/arrow.svg" mode="" />
          </view>
        </view>
        <view class="info-list">
          <text>身份证过期时间</text>
          <view class="group-classfiy">
            <van-radio-group
              v-model="checked"
              shape="dot"
              @change="checkedChange"
              class="group-style"
            >
              <van-radio name="1">长期</van-radio>
              <van-radio style="margin-left: 30rpx" name="2">{{
                getSelectTime || "点击选择时间"
              }}</van-radio>
            </van-radio-group>
          </view>
        </view>
      </view>
    </view>
    <view class="authentication-box">
      <view class="suthentication-portrait">
        <view class="portraitt-title">
          <text>身份证人像面</text>
        </view>
        <view
          class="portrait-uploading-image"
          @click="uploadingNationalEmblem(0)"
        >
          <!-- uploadingNationalEmblem(0)   uploadingImageChange -->
          <view class="portrait-uploading">
            <view class="uploading-titles" v-if="!personImage">
              <text>仅供本次审核使用</text>
            </view>
            <view
              class="uploading-bottom"
              :style="
                personImage ? 'bottom:0;display:flex;align-items:center;' : ''
              "
            >
              <image
                :src="personImage"
                class="uploading-success-image"
                v-if="personImage"
                mode="widthFix"
              />
              <view class="uploading-images" v-if="!personImage">
                <image src="@/static/mine/uploading.svg" mode="" />
              </view>
              <view class="uploading-text" v-if="!personImage">
                <text>上传照片</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="authentication-box">
      <view class="suthentication-portrait">
        <view class="portraitt-title">
          <text>身份证国徽面</text>
        </view>
        <view
          class="portrait-uploading-image"
          @click="uploadingNationalEmblem(1)"
        >
          <view class="portrait-uploading">
            <view class="uploading-titles" v-if="!emblem">
              <text>仅供本次审核使用</text>
            </view>
            <view
              class="uploading-bottom"
              :style="emblem ? 'bottom:0;display:flex;align-items:center;' : ''"
            >
              <image
                :src="emblem"
                class="uploading-success-image"
                v-if="emblem"
                mode="widthFix"
              />
              <view class="uploading-images" v-if="!emblem">
                <image src="@/static/mine/uploading.svg" mode="" />
              </view>
              <view class="uploading-text" v-if="!emblem">
                <text>上传照片</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="authentication-box" v-if="classfiyType == 1">
      <view class="suthentication-portrait">
        <view class="portraitt-title">
          <text>营业执照扫描件</text>
        </view>
        <view
          class="portrait-uploading-image"
          @click="uploadingNationalEmblem(2)"
        >
          <view class="portrait-uploading">
            <view class="uploading-titles" v-if="!idcardImage">
              <text>仅供本次审核使用</text>
            </view>
            <view
              class="uploading-bottom"
              :style="
                idcardImage ? 'bottom:0;display:flex;align-items:center;' : ''
              "
            >
              <image
                :src="idcardImage"
                class="uploading-success-image"
                v-if="idcardImage"
                mode="widthFix"
              />
              <view class="uploading-images" v-if="!idcardImage">
                <image src="@/static/mine/uploading.svg" mode="" />
              </view>
              <view class="uploading-text" v-if="!idcardImage">
                <text>上传照片</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="write-info-content write-info-custom" v-if="classfiyType == 1">
      <view class="info-content">
        <view class="info-list">
          <text>营业执照注册号</text>
          <input
            type="text"
            v-model="registerNo"
            placeholder="请输入您的营业执照注册号"
          />
        </view>
        <view class="info-list">
          <text>商户名称</text>
          <input
            type="text"
            v-model="merchant"
            placeholder="请输入您的商户名称"
          />
        </view>
        <view class="info-list">
          <text>经营者/法人姓名</text>
          <input
            type="text"
            v-model="legalName"
            style="flex: 1"
            placeholder="请输入您的经营者/法人姓名"
          />
        </view>
        <view class="info-list">
          <text>商户经营描述</text>
          <input
            type="text"
            v-model="BusinessDescription"
            style="flex: 1"
            placeholder="请输入您的经营者/法人姓名"
          />
        </view>
      </view>
    </view>
  </view>
  <view class="btns pseron-uploading" v-show="!backShow">
    <view class="fixed-content">
      <Button
        @clickButton="carete"
        :loading="loading"
        loading-text="下一步"
        text="下一步"
      />
    </view>
  </view>

  <view v-show="backShow">
    <view class="write-info">
      <view class="write-info-content">
        <view class="info-content">
          <view class="info-list">
            <text>开户人姓名</text>
            <input type="text" v-model="accountName" placeholder="开户人姓名" />
          </view>
          <view class="info-list" @click="bankShow = true">
            <text>开户银行</text>
            <text>{{ accountBank || "请选择您的开户银行" }}</text>
          </view>
          <view class="info-list" @click="selectBankArea">
            <text>开户银行地区</text>
            <text>{{ selectCity || "请选择您的开户银行地区" }}</text>
          </view>
          <view class="info-list">
            <text>银行账号</text>
            <input
              type="text"
              maxlength="19"
              minlength="16"
              v-model="accountBankNumber"
              placeholder="请输入您的银行账号"
            />
          </view>
        </view>
      </view>
    </view>
  </view>
  <view class="btns pseron-uploading person-next-change" v-show="backShow">
    <view class="fixed-content button-classfiy">
      <Button
        @clickButton="backNext"
        :loading="loading"
        loading-text="上一步"
        text="上一步"
      />
      <Button
        @clickButton="successSubmitInfoChange"
        :loading="loading"
        loading-text="下一步"
        text="下一步"
        style="margin-left: 20rpx"
      />
    </view>
  </view>
  <van-popup
    v-model:show="dateShow"
    position="bottom"
    :style="{ width: '100%' }"
  >
    <van-date-picker
      v-model="currentDate"
      title="过期时间"
      :min-date="minDate"
      :max-date="maxDate"
      @confirm="successChange"
    />
  </van-popup>
  <van-popup
    v-model:show="startTime"
    position="bottom"
    :style="{ width: '100%' }"
  >
    <van-date-picker
      v-model="currentDate"
      title="开始时间"
      :min-date="expireDate"
      :max-date="maxDate"
      @confirm="openStartTimeChange"
    />
  </van-popup>
  <van-popup
    v-model:show="areaShow"
    position="bottom"
    :style="{ width: '100%' }"
  >
    <van-picker
      title="标题"
      :columns="columns"
      @confirm="onConfirm"
      @cancel="onCancel"
      @change="onChange"
    />
  </van-popup>
  <van-popup
    v-model:show="bankShow"
    position="bottom"
    :style="{ width: '100%' }"
  >
    <van-picker
      :columns-field-names="{ text: 'dictLabel', value: 'dictCode' }"
      title="开户银行"
      :columns="bankList"
      @confirm="bankOnConfirm"
      @cancel="bankShow = false"
    />
  </van-popup>

  <!-- 城市 -->
  <van-popup v-model:show="cityShow" round position="bottom">
    <van-area
      title="开户行银行地区"
      :area-list="areaList"
      @confirm="cityConfirm"
    />
  </van-popup>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import {
  getMerchantPage,
  postMerchant,
  getUserArea,
  getWriteFillList,
  applyments,
  userDetails,
} from "@/api/apiList";
import { BASE_URL } from "@/config/base.js";
import { areaList } from "@vant/area-data";

// 城市
const cityShow = ref(false);
const selectCity = ref("");
const areaName = ref("");
const selectedValues = ref("");
const cityConfirm = (data) => {
  const arr = ref([]);
  data.selectedOptions.forEach((item) => arr.value.push(item.text));
  selectCity.value = arr.value.join("-");
  areaName.value = arr.value.join("-");
  accountOpeningRegion.value =
    data.selectedValues[data.selectedValues.length - 1];
  selectedValues.value = data.selectedValues[2];
  cityShow.value = false;
  console.log(data, "city");
};

// 获取银行列表
const bankShow = ref(false);
const bankList = ref([]);
const getBank = async () => {
  const res = await getWriteFillList("/bank");
  if (res.code == 200) {
    bankList.value = res.data;
    console.log(bankList.value, "bankList.value");
  }
};
getBank();

const bankOnConfirm = (data) => {
  accountBank.value = data.selectedOptions[0].dictLabel;
  bankShow.value = false;
  console.log(data, "data");
};

const emblem = ref();
const personImage = ref();
const idcardImage = ref();
const dateShow = ref<boolean>(false);
const minDate = ref<Date>(new Date(new Date().getFullYear(), 0, 1));
const maxDate = ref<Date>(new Date(2099, 5, 1));
const expireDate = ref<Date>(new Date(1960, 1, 1));
const currentDate = ref<Array<string | number>>([
  new Date().getFullYear(),
  new Date().getMonth() + 1,
  new Date().getDate(),
]);
const uploadingNationalEmblem = (classify: number | NumberConstructor) => {
  uni.chooseImage({
    success: (result) =>
      new Promise((resolve) => {
        try {
          uni.uploadFile({
            url: BASE_URL + "/prod-api/app/user/upload",
            name: "file",
            filePath: result.tempFilePaths[0],
            header: {
              Authorization: "Bearer " + uni.getStorageSync("token"),
            },
            success: (response) =>
              new Promise(async (resolve) => {
                const JSONDATA = JSON.parse(response.data);
                console.log(JSONDATA);
                if (JSONDATA?.code <= 200 && JSONDATA?.code > 100) {
                  if (classify == 0) {
                    personImage.value = BASE_URL + JSONDATA?.data.url;
                    imageSecectKey.value = JSONDATA?.data.mediaId;
                  } else if (classify == 1) {
                    emblem.value = BASE_URL + JSONDATA?.data.url;
                    imageSecectKeyTow.value = JSONDATA?.data.mediaId;
                  } else {
                    idcardImage.value = BASE_URL + JSONDATA?.data.url;
                    imageSecectKeyThree.value = JSONDATA?.data.mediaId;
                  }
                } else {
                  uni.showToast({
                    title: "上传失败，请注意上传格式，或者请联系管理员",
                    icon: "none",
                  });
                }
              }),
          });
        } catch (error) {}
      }),
  });
};

const loading = ref<boolean>(false);
const imageSecectKey = ref<string | undefined>();
const imageSecectKeyTow = ref<string | undefined>();
const imageSecectKeyThree = ref<string | undefined>();
const carete = () => {
  if (
    !userName.value ||
    !userPhoneCall.value ||
    !userIdCardNumber.value ||
    !startTimeValue.value ||
    !getSelectTime.value
  ) {
    return uni.showToast({
      title: !userName.value
        ? "姓名不能为空"
        : !userPhoneCall.value
        ? "手机号不能为空"
        : !userIdCardNumber.value
        ? "身份证号不能为空"
        : !startTimeValue.value
        ? "身份证开始时间不能为空"
        : !getSelectTime.value
        ? "身份证结束时间不能为空"
        : "",
      icon: "none",
    });
  }
  loading.value = true;
  uni.showToast({
    title: "保存信息中",
    icon: "none",
  });
  setTimeout(() => {
    loading.value = false;
    backShow.value = true;
  }, 2000);
};

const backShow = ref<boolean>(false);
const longTerm = ref<string>();
const checkedChange = (e) => {
  console.log(e);
  if (e == "2") {
    dateShow.value = !dateShow.value;
  } else {
    longTerm.value = e;
  }
};

const getSelectTime = ref();
const successChange = (e: { selectedValues: Array<string> }) => {
  console.log(e.selectedValues);
  getSelectTime.value = e.selectedValues.join("-");
  dateShow.value = !dateShow.value;
  console.log(getSelectTime.value);
};

const startTime = ref<boolean>(false);
const startTimeValue = ref<string>("");
const openStartTimeSelectChange = () => {
  startTime.value = !startTime.value;
};
const openStartTimeChange = (e: { selectedValues: Array<string> }) => {
  startTimeValue.value = e.selectedValues.join("-");
  openStartTimeSelectChange();
};

// 提交信息
const userName = ref<string>("");
const userPhoneCall = ref<number | null>(null);
const userIdCardNumber = ref<string | number | null>(null);
const accountName = ref<string>("");
const accountBank = ref<string>("");
const accountOpeningRegion = ref<string>("");
const accountBankNumber = ref<number | null>(null);
const registerNo = ref<string>("");
const merchant = ref<string>("");
const legalName = ref<string>("");
const BusinessDescription = ref<string>("");
const successSubmitInfoChange = async () => {
  if (
    !userName.value ||
    !userPhoneCall.value ||
    !userIdCardNumber.value ||
    !startTimeValue.value ||
    !getSelectTime.value ||
    !accountName.value ||
    !accountBank.value ||
    !accountOpeningRegion.value ||
    !accountBankNumber.value
  ) {
    return uni.showToast({
      title: !userName.value
        ? "姓名不能为空"
        : !userPhoneCall.value
        ? "手机号不能为空"
        : !userIdCardNumber.value
        ? "身份证号不能为空"
        : !startTimeValue.value
        ? "身份证开始时间不能为空"
        : !getSelectTime.value
        ? "身份证结束时间不能为空"
        : !accountName.value
        ? "开户行名称不能为空"
        : !accountBank.value
        ? "开户行银行名称不能为空"
        : !accountOpeningRegion.value
        ? "开户行地区不能为空"
        : !accountBankNumber.value
        ? "开户行银行账号不能为空"
        : "",
      icon: "none",
    });
  }
  const splitText = accountBankNumber.value.split("");
  if (splitText.length < 16) {
    return uni.showToast({
      title: "银行卡账号不能低于16位",
      icon: "none",
    });
  }

  if (splitText.length > 19) {
    return uni.showToast({
      title: "银行卡账号不能大于19位",
      icon: "none",
    });
  }
  let newPrams = {};
  const parms: {
    userName: string;
    phonenumber: number;
    idCard: string | number;
    startTime: string;
    expireTime: any;
    accountName: string;
    bank: string;
    bankArea: string;
    accountNo: number;
    frontImage?: string;
    backImage?: string;
    businessImage?: string;
    areaName: string;
    organization_type: number;
    id_doc_type: string;
    out_request_no: string;
    account_info: {
      bank_account_type: number;
      account_bank: string;
      account_name: string;
      bank_address_code: string;
      bank_branch_id: string;
      account_number: string;
      bank_name: string;
    };
    id_card_info: {
      id_card_copy: string;
      id_card_national: string;
      id_card_name: string;
      id_card_number: string | number;
      id_card_valid_time_begin: string;
      id_card_valid_time_end: string;
    };
    contact_info: {
      contact_type: number;
      contact_name: string;
      mobile_phone: string;
    };
    sales_scene_info: {
      store_name: string;
      store_qr_code: string;
    };
    merchant_shortname: string;
    type?: number;
    status?: number;
    id?: string;
  } = {
    userName: userName.value,
    phonenumber: userPhoneCall.value,
    idCard: userIdCardNumber.value,
    startTime: startTimeValue.value,
    expireTime: getSelectTime.value,
    accountName: accountName.value,
    bank: accountBank.value,
    bankArea: accountOpeningRegion.value,
    accountNo: accountBankNumber.value,
    frontImage: imageSecectKey.value,
    backImage: imageSecectKeyTow.value,
    businessImage: idcardImage.value,
    areaName: areaName.value,
    organization_type: classfiyType.value == 0 ? 2401 : 4,
    // classfiyType.value == 0 ? 2401 : 2504
    id_doc_type: "IDENTIFICATION_TYPE_MAINLAND_IDCARD",
    account_info: {
      bank_account_type: 75,
      account_bank: accountBank.value,
      account_name: accountName.value,
      bank_address_code: selectedValues.value,
      account_number: accountBankNumber.value,
    },
    // （商家/用户）身份信息
    id_card_info: {
      id_card_copy: imageSecectKey.value, //imageSecectKey.value
      id_card_national: imageSecectKeyTow.value, //imageSecectKeyTow.value
      id_card_name: userName.value, // userName.value
      id_card_number: userIdCardNumber.value, // userIdCardNumber.value
      id_card_valid_time_begin: startTimeValue.value, // startTimeValue.value
      id_card_valid_time: getSelectTime.value, // getSelectTime.value
    },
    // 超级管理员信息
    contact_info: {
      contact_type: 65,
      contact_name: userName.value,
      mobile_phone: userPhoneCall.value,
    },
    // 店铺信息
    sales_scene_info: {
      store_name: classfiyType.value == 0 ? "汇友互助" : "",
      store_url:
        classfiyType.value == 0 ? "https://h5.qunxinghuzhu.com/h5/#/" : "",
    },
    // 商户简称
    merchant_shortname: "汇友互助",
    business_addition_desc:
      "该商户已持续从事电子商务经营活动满6个月，且期间经营收入累计超过20万元。",
  };
  if (classfiyType.value == 1) {
    newPrams = Object.assign(parms, {
      registerNo: registerNo.value,
      merchant: merchant.value,
      legalName: legalName.value,
      // cert_type: "CERTIFICATE_TYPE_2389",
      business_license_info: {
        business_license_copy: imageSecectKeyThree.value,
        business_license_number: registerNo.value,
        merchant_name: merchant.value,
        legal_person: legalName.value,
      },
      // 店铺信息
      sales_scene_info: {
        store_name: "汇友互助",
        store_url: "https://h5.qunxinghuzhu.com/h5/#/",
      },
      merchant_shortname: merchant.value,
      business_addition_desc:
        BusinessDescription.value != undefined ||
        BusinessDescription.value != ""
          ? "该商户已持续从事电子商务经营活动满6个月，且期间经营收入累计超过20万元。"
          : BusinessDescription.value,
    });
  }
  parms.type = classfiyType.value;
  if (status.value == 1) parms.status = status.value;
  if (id.value) parms.id = id.value;

  const response = await applyments(classfiyType.value == 0 ? parms : newPrams);
  if (response) {
    uni.showToast({
      title: "资料提交成功，请耐心等待",
      icon: "none",
    });
    uni.redirectTo({
      url: "/pages/mine/merchant",
    });
  }
};

const checked = ref("1");
const classfiyType = ref();
const status = ref("no");
const id = ref("");
onLoad((e) => {
  if (e && e.type) {
    classfiyType.value = e.type;
    if (e.data) {
      const data = JSON.parse(decodeURIComponent(e.data));
      if (data.expireTime) checked.value = "2";
      status.value = 1;
      id.value = data.id;
      console.log(data, "data");
      userName.value = data.userName;
      userPhoneCall.value = data.phonenumber;
      userIdCardNumber.value = data.idCard;
      startTimeValue.value = data.startTime;
      getSelectTime.value = data.expireTime;
      accountName.value = data.accountName;
      accountBank.value = data.bank;
      accountOpeningRegion.value = data.bankArea;
      accountBankNumber.value = data.accountNo;
      personImage.value = data.frontImage;
      emblem.value = data.backImage;
      idcardImage.value = data.businessImage;
      areaName.value = data.areaName;
      registerNo.value = data.registerNo;
      merchant.value = data.merchant;
      legalName.value = data.legalName;
      selectCity.value = data.areaName;
    }
    uni.setNavigationBarTitle({
      title: e.type == 0 ? "个人小微签约" : "个体工商户签约",
    });
  }
});

const backNext = () => {
  loading.value = true;
  uni.showToast({
    title: "正在返回上一页",
    icon: "none",
  });
  setTimeout(() => {
    loading.value = false;
    backShow.value = !backShow.value;
  }, 2000);
};

const areaShow = ref<boolean>(false);
const selectBankArea = () => {
  cityShow.value = !cityShow.value;
};

const columns = ref<Array<object>>();
const getAreaListData = async () => {
  const areaList = await getUserArea();
  console.log(areaList);
  columns.value = areaList.rows.map((items) => {
    return {
      text: items.name.split(",").join(""),
      value: items.name.split(",").join(""),
    };
  });
};
getAreaListData();

const onConfirm = (e) => {
  accountOpeningRegion.value = e.selectedValues.join("");
  selectBankArea();
};
</script>

<style lang="scss" scoped>
.signing {
  .signing-step {
    padding: 0 152rpx;
    background: white;
    padding-top: 10rpx;
    padding-bottom: 20rpx;

    .signing-step-content {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .signing-step-list {
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;

        > text {
          width: 40rpx;
          height: 40rpx;
          background: #c0c0c0;
          display: block;
          text-align: center;
          line-height: 40rpx;
          border-radius: 100rpx;
          font-family: PingFang SC Medium;
          font-size: 12px;
          color: #ffffff;
        }
      }

      .signing-title {
        margin-top: 8rpx;

        text {
          font-family: PingFang SC Medium;
          font-size: 12px;
          color: #999999;
        }
      }

      .line {
        width: 244rpx;
        height: 2rpx;
        background: #c0c0c0;
        margin-top: -40rpx;
      }
    }
  }
}

.step-style {
  > text {
    background: #0753fd !important;
  }

  .signing-title {
    text {
      color: #111 !important;
    }
  }
}

// ---------------------------info------------------------
.write-info {
  margin-top: 20rpx;

  .write-info-content {
    padding: 40rpx;
    background: white;

    .info-content {
      .info-list {
        display: flex;
        align-items: center;
        padding-bottom: 40rpx;
        margin-bottom: 40rpx;
        border-bottom: 1rpx solid #eeeeee;

        > text {
          font-family: PingFang SC Medium;
          font-size: 14px;
          color: #111111;
          width: 35%;
          display: block;

          &:nth-child(2) {
            white-space: nowrap;
            color: gray;
          }
        }

        input {
          font-family: PingFang SC Medium;
          font-size: 14px;

          &::placeholder {
            color: #aaaaaa;
          }
        }

        .info-cad-num {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: space-between;

          text {
            white-space: nowrap;
            font-family: PingFang SC Medium;
            font-size: 14px;
            color: #aaaaaa;
          }

          image {
            width: 24rpx;
            height: 24rpx;
          }
        }

        .group-classfiy {
          .group-style {
            font-size: 14px;
            display: flex;
            align-items: center;
            color: #111111;
          }
        }
      }
    }
  }
}

.authentication-box {
  background: white;
  margin-top: 20rpx;
  padding: 30rpx;
  padding-right: 80rpx;

  .suthentication-portrait {
    display: flex;
    justify-content: space-between;

    .portraitt-title {
      text {
        font-family: PingFang SC Medium;
        font-size: 14px;
        color: #111111;
      }
    }

    .portrait-uploading-image {
      .portrait-uploading {
        width: 200px;
        height: 128px;
        border-radius: 8px;
        background: #f8f8f8;
        box-sizing: border-box;
        border: 1px solid #dddddd;
        display: flex;
        flex-direction: column;
        position: relative;

        text {
          text-align: center;
          font-family: PingFang SC Medium;
          font-size: 15px;
          color: #111111;

          &:nth-last-child(1) {
            padding-top: 24rpx;
            padding-left: 10rpx;
            text-align: left;
          }
        }

        image {
          width: 30rpx;
          height: 30rpx;
        }

        .uploading-titles {
          margin-top: 20rpx;
          margin-left: 10rpx;

          text {
            font-family: PingFang SC Medium;
            font-size: 11px;
            color: #999999;
          }
        }

        .uploading-bottom {
          position: absolute;
          bottom: 36rpx;
          width: 100%;

          .uploading-images,
          .uploading-text {
            display: flex;
            align-items: center;
            justify-content: center;
          }
        }
      }
    }
  }
}

.pseron-uploading {
  bottom: 10rpx;
  display: flex;
  width: 100%;

  .fixed-content {
    flex: 1;
    margin: 30rpx;
  }
}

.write-info-custom {
  margin-top: 20rpx;

  .info-list {
    &:nth-last-child(1) {
      margin-bottom: 0 !important;
      padding-bottom: 0 !important;
      border: none !important;
    }
  }
}

.button-classfiy {
  display: flex;
  align-items: center;
}

.person-next-change {
  position: fixed;
  bottom: 30rpx;
}

.uploading-success-image {
  width: 200px !important;
  height: 128px !important;
  bottom: 0 !important;
}
</style>
